<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sessionStorage会话存储</title>
</head>
<body>

<!--
## webStorage
1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3. 相关API：
    - 1). ```xxxxxStorage.setItem('key', 'value');```
       该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
    - 2). ```xxxxxStorage.getItem('person');```
        该方法接受一个键名作为参数，返回键名对应的值。
    - 3). ```xxxxxStorage.removeItem('key');```
        该方法接受一个键名作为参数，并把该键名从存储中删除。
    - 4). ``` xxxxxStorage.clear()```
        该方法会清空存储中的所有数据。
4. 备注：
    - 1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    - 2. LocalStorage存储的内容，需要手动清除才会消失。
    - 3. ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到，那么getItem的返回值是null。
    - 4. ```JSON.parse(null)```的结果依然是null。
-->

<h1>sessionStorage本地存储api调用</h1>
<button onclick="saveData()">点我保存数据</button>
<button onclick="readData()">点我读取数据</button>
<button onclick="deleteData()">点我删除数据</button>
<button onclick="deleteAllData()">点我清空数据</button>

<script type="text/javascript">
    // 定义一个person对象，并存储到sessionStorage里面
    const person = {
        name: '张飒飒',
        age: 18
    }

    // 保存数据
    function saveData() {
        console.log("saveData");
        // 其中window身上的，可以省略window直接写对应的属性或者方法等
        window.sessionStorage.setItem("name", "我在尚硅谷学习Vue!!!");
        sessionStorage.setItem("person", JSON.stringify(person));
    }

    // 读取数据
    function readData() {
        console.log("readData");
        // 其中window身上的，可以省略window直接写对应的属性或者方法等
        console.log(window.sessionStorage.getItem("name"));

        let item = sessionStorage.getItem("person");
        // 其中如果JSON.parse解析的对象不存在的话，返回的是null
        console.log(JSON.parse(item));
    }

    // 删除数据
    function deleteData() {
        console.log("deleteData");
        // 其中window身上的，可以省略window直接写对应的属性或者方法等
        sessionStorage.removeItem("person");
    }

    // 清空数据
    function deleteAllData() {
        console.log("deleteData");
        // 其中window身上的，可以省略window直接写对应的属性或者方法等
        sessionStorage.clear();
    }

</script>
</body>
</html>